<template>
  <DataPage title="游戏日报">
            <Form inline slot="form" style="margin-top:20px">
                <Form-item label="关键字" :label-width="60">
                    <Input type="text" placement="bottom-end" placeholder="输入关键字" v-model="searchForm.keyword" style="width: 280px"></Input>
                </Form-item>
                <Form-item>
                    <Button type="primary" icon="ios-search" @click="search">搜索</Button>
                </Form-item>
                <input type="hidden">
            </Form>
            <Form inline slot="form" style="margin-top:20px">
                <Form-item label="名称" :label-width="60">
                    <Input type="text" placement="bottom-end" placeholder="输入名称" v-model="addForm.name" style="width: 280px"></Input>
                </Form-item>
                <Form-item label="封面图片" :label-width="60">
                    <Input type="text" placement="bottom-end" placeholder="输入封面图片地址" v-model="addForm.coverImage" style="width: 280px"></Input>
                </Form-item>
                <Form-item label="简介" :label-width="60">
                    <Input type="textarea" :rows="4" placement="bottom-end" placeholder="输入简介" v-model="addForm.intro" style="width: 280px"></Input>
                </Form-item>
                <Form-item label="播放地址" :label-width="60">
                    <Input type="textarea" :rows="4" placement="bottom-end" placeholder="输入地址" v-model="addForm.playUrl" style="width: 280px"></Input>
                </Form-item>
                <Form-item label="分类" :label-width="60">
                  <Select v-model="addForm.type" style="width:280px">
                    <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </Form-item>
                <Form-item label="类型" :label-width="60">
                  <Select v-model="addForm.series" style="width:280px">
                    <Option v-for="item in seriesList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </Form-item>
                <Form-item>
                    <Button type="primary" icon="android-add" @click="addSeries">添加</Button>
                </Form-item>
                <!-- <input type="hidden"> -->
            </Form>
            <div slot="data">
                <Table style="margin-left:20px" size="small" border
                    :columns="column" :data="list"></Table>

                <Page style="float:right;margin-right:20px; margin-top:20px" v-if="!loading && total"
                    size="small"
                    :total="total"
                    :page-size="pageSize"
                    :current="page"
                    @on-change="onPageChange"
                    @on-page-size-change="onPageSizeChange"
                    placement="top"
                    show-total
                    show-sizer></Page>
            </div>

      </DataPage>
</template>
<script>
import dateUtil from 'iview/src/utils/date'
export default {
    data() {
        return {
            addForm: {
                name: '',
                coverImage: '',
                intro: '',
                playUrl: '',
                series: '',
                type: ''
            },
            typeList: [
                {
                    value: '0',
                    label: '美剧'
                },
                {
                    value: '1',
                    label: '国产剧'
                },
                {
                    value: '2',
                    label: '港台剧'
                },
                {
                    value: '3',
                    label: '日韩剧'
                },
                {
                    value: '4',
                    label: '搞笑'
                },
                {
                    value: '5',
                    label: '自拍'
                }
            ],
            seriesList: [
                {
                    value: '0',
                    label: '连续剧'
                },
                {
                    value: '1',
                    label: '单个视频'
                }
            ],
            searchForm: {
                mobile: '',
                keyword: ''
            },
            loading: false,
            page: 1,
            pageSize: 10,
            total: 0,
            list: [],
            column: [
                {
                    title: '添加日期',
                    key: 'createAt',
                    width: 100,
                    render(h, { row }) {
                        return h(
                            'span',
                            dateUtil.format(row.createAt, 'yyyyMMdd')
                        )
                    }
                },
                {
                    title: '名称',
                    key: 'name',
                    width: 100
                },
                {
                    title: '封面',
                    key: 'coverImage',
                    width: 150,
                    render: (h, params) => {
                        return h('div', [
                            h('img', {
                                props: {
                                    size: 'small'
                                },
                                attrs: {
                                    src: params.row.coverImage,
                                    style:
                                        'width: 60px;height: 90px;border-radius: 2px;'
                                },
                                on: {
                                    click: () => {
                                        this.addEpisode()
                                    }
                                }
                            })
                        ])
                    }
                },
                {
                    title: '简介',
                    key: 'intro',
                    width: 250
                },
                {
                    title: '来源',
                    key: 'vFrom',
                    width: 70
                },
                {
                    title: '操作',
                    // key: 'vFrom',
                    width: 150,
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.addEpisode()
                                        }
                                    }
                                },
                                '添加'
                            ),
                            h(
                                'Button',
                                {
                                    props: {
                                        size: 'small'
                                    },
                                    on: {
                                        click: val => {
                                            this.getEpisodeList()
                                        }
                                    }
                                },
                                '查看'
                            )
                        ])
                    }
                },
                {
                    title: '显示',
                    // key: 'vFrom',
                    width: 100,
                    render: (h, params) => {
                        // console.log('params:', params)
                        return h('div', [
                            h('i-switch', {
                                props: {
                                    value: params.row.status == 1
                                },
                                on: {
                                    'on-change': (value) => {
                                        //触发事件是on-change,用双引号括起来，
                                        //参数value是回调值，并没有使用到
                                        this.switch(params.row.id, value) //params.index是拿到table的行序列，可以取到对应的表格值
                                    }
                                }
                            })
                        ])
                    }
                }
            ]
        }
    },
    mounted() {
        console.log('mounted home:' + this.home)
        this.listData()
    },
    methods: {
        async addSeries() {
            console.log('addSeries:,', this.addForm)
            //POST /v1/video/add-video-series
            this.$Loading.start()
            const response = await this.$axios.post(
                '/meiju-boss/api/v1/video/add-video-series',
                this.addForm
            )
            console.log('response:', response)
            this.$Loading.finish()
            if (response.data.success) {
                this.$Message.success(response.data.message)
                this.listData()
            } else {
                this.$Message.error(response.data.message)
            }
        },
        search() {
            this.page = 1
            // this.listData()
            console.log('search:' + this.searchForm.date)
            this.listData()
        },
        addEpisode() {
            console.log('addEpisode')
        },
        getEpisodeList() {
            console.log('getEpisodeList')
        },
        async switch(seriesId, value) {
            console.log('switch value:', value)
            this.$Loading.start()
            var params = new URLSearchParams();
            params.append('seriesId', seriesId);
            params.append('isOpen', value ? '1' : '0');
            const response = await this.$axios.post('/meiju-boss/api/v1/video/switch-series', params)
            console.log('response:', response)
            if (response.data.success) {
                this.$Message.success(response.data.message)
            } else {
                this.$Message.error(response.data.message)
            }
            this.$Loading.finish()
        },
        async listData() {
            console.log('listData')
            if (this.loading) {
                return
            }

            this.loading = true
            this.$Loading.start()
            // const opt = {
            //     page: this.page,
            //     pageSize: this.pageSize,
            // }
            // if (this.home) {
            //     opt.pageSize = 3
            // }
            // let date
            // if (this.searchForm.date) {
            //     date = dateUtil.format(this.searchForm.date, 'yyyyMMdd')
            //     opt._date = date
            // }
            // console.log('date:' + date)

            // const response = await this.$api.SummaryApi.gameSummary(opt)
            // this.loading = false
            // console.log('response:',response)
            // Object.assign(this, response)
            const response = await this.$axios.get(
                '/meiju-boss/api/v1/video/series-list',
                {
                    params: {
                        page: this.page,
                        pageSize: this.pageSize
                    }
                }
            )
            console.log('series-list response: ', response)
            Object.assign(this, response.data)
            this.loading = false
            this.$Loading.finish()
        },

        onPageChange(page) {
            this.page = page
            this.listData()
        },

        onPageSizeChange(pageSize) {
            this.pageSize = pageSize
            this.listData()
        }
    }
}
</script>